<template>
  <div ref="chart" style="width: 100%; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts'; // 确保这里正确引入

export default {
  name: 'EchartsReport',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      var now = Date.now();
      var twoHoursAgo = now - 2 * 60 * 60 * 1000; // 两小时前的时间戳

      // 生成时间序列（120分钟）
      var categories = [];
      var maxData = [];
      var minData = [];
      var avgData = [];

      for (var i = 0; i < 120; i++) {
        var timestamp = twoHoursAgo + i * 60 * 1000;

        // 生成模拟数据
        var maxValue = 30 + Math.sin(i * Math.PI / 60) * 5 + Math.random() * 2;
        var minValue = 15 + Math.cos(i * Math.PI / 60) * 3 + Math.random() * 2;
        var avgValue = (maxValue + minValue) / 2 + Math.random();

        // 保留两位小数
        maxData.push([timestamp, maxValue.toFixed(2)]);
        minData.push([timestamp, minValue.toFixed(2)]);
        avgData.push([timestamp, avgValue.toFixed(2)]);
      }

      const option = {
        animation: false,
        legend: {
          data: ['最大值', '最小值', '平均值']
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              show: true,
              title: {
                zoom: '区域缩放',
                back: '还原'
              }
            },
            saveAsImage: { show: true }
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            var date = new Date(params[0].value[0]);
            var time = date.toLocaleTimeString('zh-CN', { 
              hour: '2-digit', 
              minute: '2-digit'
            });

            return params.reduce(function (res, item) {
              return res + item.marker + ' ' + item.seriesName + ': ' 
                     + item.value[1] + '<br/>';
            }, time + '<br/>');
          }
        },
        xAxis: {
          type: 'time',
          min: twoHoursAgo,
          max: now,
          axisLabel: {
            formatter: function (value) {
              return new Date(value).toLocaleTimeString('zh-CN', { 
                hour: '2-digit', 
                minute: '2-digit'
              });
            }
          },
          splitLine: { show: true }
        },
        yAxis: {
          type: 'value',
          splitLine: { show: true },
          axisLabel: {
            formatter: '{value} °C'
          }
        },
        dataZoom: [
          {
            type: 'slider',
            xAxisIndex: 0,
            start: 50,      // 默认显示后50%的数据（最近1小时）
            end: 100
          },
          {
            type: 'inside',
            xAxisIndex: 0
          }
        ],
        series: [
          {
            name: '最大值',
            type: 'line',
            showSymbol: false,
            smooth: true,
            data: maxData,
            itemStyle: { color: '#c23531' }
          },
          {
            name: '最小值',
            type: 'line',
            showSymbol: false,
            smooth: true,
            data: minData,
            itemStyle: { color: '#2f4554' }
          },
          {
            name: '平均值',
            type: 'line',
            showSymbol: false,
            smooth: true,
            data: avgData,
            itemStyle: { color: '#61a0a8' }
          }
        ]
      };

      const chart = echarts.init(this.$refs.chart);
      chart.setOption(option);
    },
  },
};
</script>

<style scoped>
/* 添加一些基本样式 */
</style>



